<head>
<script>
//chrome.tabs.create({url: 'http://www.yandex.ru'});
var timers;

function showPhotos() {
  var photos = req.responseXML.getElementsByTagName("photo");

  for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.body.appendChild(img);
  }
}

function Request(minCount){
	var result = false;
	chrome.extension.sendRequest({minCount: minCount.toString()}, function(response) {
	  console.log(response.farewell);
	  if(response.farewell == 'accept'){
		//return true;
		result = true;
	  }else{
		//return false;
	  }
	});
	
	return result;
}

function addNew()
{
	//timers = document.getElementById("bots");
	//bots.innerText = "";
	inputField = document.getElementById("minutesTextBox");
	hoursField = document.getElementById("hoursTextBox");
	var min = parseInt(inputField.value);
	var hours = parseInt(hoursField.value);
	if(isNaN(min)) 
	{
		min=0;
	}

	if(isNaN(hours)) 
	{
		hours=0;
	}

	var minTotal = min+hours*60;
	var requestResult = Request(minTotal);	
	//if(requestResult == true){
		var anchor = document.createElement("a");
		anchor.innerText = "Timer:"+minTotal.toString();
		var div = document.createElement("div");
		div.appendChild(anchor);
		timers.appendChild(div);
	//}
	
	inputField.value = "";
}

window.onload = function() {
  timers = document.getElementById("bots");
  //addNew()
}

function toggle_size() {
  if (document.body.className == "big") {
    document.body.className = "small";
  } else {
    document.body.className = "big";
  }
}
</script>
<style>
body {
  font-family: sans-serif;
  font-size: 0.8em;
  overflow: hidden;
}

#links {
  background-color: #efefef;
  border: 1px solid #cccccc;
  border-radius: 5px;
  margin-top: 1px;
  padding: 3px;
  white-space: nowrap;
  text-align: center;
}

a {
  text-decoration: underline;
  color: #444;
}

a:hover {
  color: black;
  cursor: pointer;
}

body.big .bot {
  -webkit-transition: all .5s ease-out;
  margin: 20px;
}

body.small .bot {
  -webkit-transition: all .5s ease-out;
}

.bot {
  cursor: pointer;
  border-radius: 5px;
  margin-top: 1px;
  padding: 3px;
  white-space: nowrap;
}

.bot:hover {
  border: 2px solid black;
  padding: 2px;
}

.open {
  color: green;
}

.closed {
  color: red;
}

.running {
  background-color:  rgb(255, 252, 108);
  border: 1px solid rgb(197, 197, 109);
}

.notstarted {
  border: 1px solid rgb(170, 170, 170);
}

.failure {
  background-color: rgb(233, 128, 128);
  border: 1px solid rgb(167, 114, 114);
}

.warnings {
  background-color: rgb(255, 195, 67);
  border: 1px solid rgb(194, 157, 70);
}

.success {
  background-color: rgb(143, 223, 95);
  border: 1px solid rgb(79, 133, 48);
}

.exception {
  background-color: rgb(224, 176, 255);
  border: 1px solid rgb(172, 160, 179);
}
</style>
</head>
<body onclick="toggle_size()">
	<label>Minutes</label>
	<input id="minutesTextBox" type="text" name="minutesTextBox" />
	<label>Hours</label>
	<input id="hoursTextBox" type="text" name="hoursTextBox" />

	<button onclick='addNew()'>Add</button>
	<div id="bots" />
</body>